<template>
    <a-modal
            :title="title"
            width="660px"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @cancel="handleClose">
        <a-form-model ref="ruleFormModel" :model="formModel" :rules="rulesModel"
                      :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                      :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
                      style="padding-right: 60px;">
            <a-row :gutter="24">
                <a-col>
                    <a-form-model-item label="编码" prop="code">
                        <BaseInput v-model="formModel.code" placeholder="请填写正确的内容"></BaseInput>
                    </a-form-model-item>
                    <a-form-model-item label="名称" prop="name">
                        <BaseInput v-model="formModel.name" placeholder="请填写正确的内容"></BaseInput>
                    </a-form-model-item>
                    <a-form-model-item label="单点域" prop="domainId">
                        <a-select v-model="formModel.domainId" :disabled="disabled" placeholder="请填写正确的内容">
                            <a-select-option v-for="item in domainList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="角色类型" prop="type">
                        <a-select v-model="formModel.type" placeholder="请填写正确的内容">
                            <a-select-option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.label }}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="业务标识" prop="businessId">
                        <BaseInput v-model="formModel.businessId" placeholder="请填写正确的内容"></BaseInput>
                    </a-form-model-item>
                    <a-form-model-item label="描述" prop="description">
                        <BaseTextarea
                                v-model="formModel.description" placeholder="请填写正确的内容"
                                :auto-size="{ minRows: 2, maxRows: 6 }"
                        />
                    </a-form-model-item>
                </a-col>
            </a-row>
        </a-form-model >
        <template slot="footer" style="text-align: right;">
            <a-button type="primary" class="mr20" @click="handleSubmit()">提交</a-button>
            <a-button type="primary" @click="handleClose">关闭</a-button>
        </template>
    </a-modal>
</template>

<script>
  import ACol from 'ant-design-vue/es/grid/Col'
  import ARow from 'ant-design-vue/es/grid/Row'
  import { getPointDomains, addRoleList, editRoleList } from '@/api/system/system'

  export default {
    name: 'addEditRole',
    components: {
      ARow,
      ACol,
    },
    props:{
      visible:{
        type: Boolean,
        default: false,
      },
      roleIndex:{
        type: Number,
        default: null,
      },
      formModelData:{
        type: Object,
        default:{}
      }
    },
    data(){
      return{
        rulesModel: {
          name: [{ required: true, message: '请输入正确的内容', trigger: 'blur' }],
          code: [{ required: true, message: '请输入正确的内容', trigger: 'blur' }],
          domainId: [{ required: true, message: '请在工作岗位管理中选中组织', trigger: 'blur' }],
          type: [{ required: false, message: '请输入正确的内容', trigger: 'blur' }],
          resMarkup: [{ required: false, message: '请输入正确的内容', trigger: 'blur' }],
          description: [{ required: false, message: '请输入正确的内容', trigger: 'blur' }],
        },
        disabled:false,
        title:'角色新增',
        confirmLoading:false,
        formModel:{
          code: '',
          name: '',
          domainId: undefined,
          type: undefined,
          resMarkup: '',
          description: ''
        },
        domainList:[],
        typeList:[
          {id: '1', label:'平台角色'},
          {id: '0', label:'业务角色'}
        ]
      }
    },
    created(){
      // this.formModel = this.formModelData
      this.getPointDomains()
    },
    mounted() {
    },
    watch:{
      roleIndex(val, oldVal) {
        if(val === 1){
          this.title='角色新增'
          this.disabled = false
        }else if(val === 2) {
          this.title = '角色编辑'
          this.disabled = true
        }
      },
      formModelData(val, oldVal){
        if(this.roleIndex === 2){
          this.formModel = val
        }else {
          this.formModel = {}
        }

      }

    },
    methods:{
      /**
       *@desc 单点域列表 获取
       *@param {}
       */
      getPointDomains(){
        getPointDomains().then(res => {
            if(res.status === 200){
              //单点域获取成功
              this.domainList= res.data
            }
        }).catch(err => {
          console.log(err)
        })
      },
      /**
       *@desc 提交表单
       *@param {}
       */
      handleSubmit(record) {
        this.$refs.ruleFormModel.validate(valid => {
          if (valid) {
            let index =this.roleIndex
            let params = {}
            if(index === 1){
              this.handleAdd()
            }else if(index === 2){
              //用户编辑
              this.handleEdit()
            }
          } else {
            return false;
          }
        });
      },
      /**
       *@desc table 新增
       *@param {}
       */
      handleAdd() {
        addRoleList(this.formModel).then(res=>{
          if(res.status===200){
            // 新增成功
            this.handleClose()
          }
        }).catch(err =>{
          // 新增失败
          console.log(err)
        })
      },
      /**
       *@desc table 编辑
       *@param {}
       */
      handleEdit() {
        editRoleList(this.formModel).then(res=>{
          if(res.code=== 200){
            // 岗位编辑成功
            this.handleClose()
            this.$message.success('保存成功！')
          }
        }).catch(err =>{
          // 岗位编辑失败
          console.log(err)
        })
      },
      /**
       *@desc 重置表单
       *@param {}
       */
      handleReset() {
        this.$refs.ruleFormModel.resetFields();
      },
      /**
       *@desc 关闭用户新增
       *@desc 返回用户管理
       *@param {}
       */
      handleClose() {
        this.handleReset();
        this.$emit('handleCancel')
      },
    }
  }
</script>

<style scoped>

</style>